<!--
 * @描述信息:  GIS地图
 * @Author:   zls
-->
<template>
  <div class="GIS">
    <div id="mapGISBox"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { BMAP_INIT } from '@/utils/BMapGL/index.js'
import { BMAP_ADDMARKER } from '@/utils/BMapGL/addMarker.js'
import { GET_LOCATION } from '@/utils/BMapGL/getLocation.js'
import lnglatObj from './lnglat'

onMounted(() => {
  initMap()
})

// 地图实例初始化
async function initMap() {
  // 1、地图实例初始化
  const map = await BMAP_INIT({ id: 'mapGISBox', lng: 116.404, lat: 39.915, zoom: 18 }, { enableRotate: true, enableTilt: true })
  // 2、定位到当前位置
  GET_LOCATION(map)
  // 3、添加marker标注点（并使用点聚合）和 添加信息窗口
  const markerList = []
  const markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markerList })
  markerClusterer.clearMarkers(markerList)
  Object.entries(lnglatObj).forEach(([key, val]) => {
    BMAP_ADDMARKER({ map: map, id: 1, lng: val[0], lat: val[1] }, { enableDragging: true }, markerItem => {
      markerList.push(markerItem)
      if (markerItem.type !== 1) return
    })
  })
  markerClusterer.addMarkers(markerList)
}
</script>

<style scoped lang="scss">
.GIS {
  #mapGISBox {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: lightblue;
    :deep(.BMap_cpyCtrl) {
      display: none;
    }
    :deep(.anchorBL) {
      img {
        display: none;
      }
    }
  }
}
</style>
